<template>
  <details-layout :leftTitle="`短信记录(${number})`" @on-scroll-bottom='loadMore' :load-stop="loadStop">
    <div class="detail">
      <record-list :data="converseList" :is-show-load-all="false" v-if="converseList.length > 0"></record-list>
      <span v-else class="tip-null">暂无数据</span>
    </div>
    <div class="loadDi" v-if="loadStop">
      ------&nbsp;我也是有底线的&nbsp;------
    </div>
  </details-layout>
</template>

<script>
  import DetailsLayout from '../../components/details-layout'
  import RecordList from '../../components/record-list'
  import request from '../../helper/request'

  export default {
    components: {
      DetailsLayout,
      RecordList
    },
    data() {
      return {
        converseList: [],
        number: '',
        loadStop: false,
        page: {}
      }
    },
    methods: {
      /**
       * 加载更多
       */
      loadMore() {
        this.loadStop = false
        if (this.page.currPage < this.page.pageCount) {
          this.getQueryList(this.page.currPage + 1, 5)
        } else if (this.page.currPage) {
          this.loadStop = true
        }
      },
      getQueryList(currPage = 1, limit = 10) {
        let param = Object.assign({
          'sjh': '',
          'pageObj': {
            'currPage': currPage,
            'pageSize': limit,
            'pagination': '1'
          }
        }, this.$store.state.phone)
        request('superRecord/mobile/txjl', 'SC042602', param).then(res => {
          this.number = res.pageResult.totalCount
          this.page = res.pageResult
          res.dxjl.map(resTH => {
            this.converseList.push({
              mobile: resTH.sjhm,
              name: resTH.xm,
              time: resTH.lastTime,
              count: resTH.num
            })
          })
        }).catch(err => {
          this.$toast(err.msg)
        })
      }
    },
    created() {
      this.getQueryList()
    }
  }
</script>

<style lang="scss" scoped>
  .detail {
    padding: .5rem .2rem;
  }

  .loadDi {
    text-align: center;
    padding: .5rem .2rem .8rem;
    color: #ccc;
  }

  ul {
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #fff;
    li {
      height: 85px;
      margin: 0 15px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ddd;
      p {
        margin: 0;
        font-size: 18px;
      }
      .left {
        flex: 1;
        .mobile {
          color: #5078ac;
          margin-bottom: 5px;
        }
        .name {
          color: #000;
        }
      }
      .right {
        .time {
          text-align: right;
          margin-bottom: 5px;
        }
        .count {
          height: 22px;
          line-height: 22px;
          padding: 0 5px;
          color: #fff;
          background-color: #fe6601;
          text-align: center;
          border-radius: 3px;
          font-size: 15px;
          float: right;
        }
      }
    }
    .lookAll {
      height: 50px;
      line-height: 25px;
      text-align: center;
      font-size: 20px;
      border: 0;
      justify-content: center;
    }
  }
</style>
